<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro"%>
<%@page import="com.mall.app.utils.MyAccount"%>
<%@page import="org.apache.shiro.SecurityUtils"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>家居商城-列表</title>
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../layui/css/layui.css">
<link rel="stylesheet" href="../static/css/index.css">
<script src="../static/js/utils.js"></script>
<script src="../layui/layui.js"></script>
</head>
<body>
	<%
		MyAccount account = (MyAccount) SecurityUtils.getSubject().getSession().getAttribute("account");
	%>
	<script>
		layui.config({
			base : '../static/js/'
		}).use('house');
	</script>

	<div class="house-header">
		<div class="layui-container">
			<div class="house-nav">
				<span class="layui-breadcrumb" lay-separator="|"> <shiro:authenticated>
						<a href="#">欢迎您，[<shiro:principal />]
						</a>
						<a href="../logout">注销</a>
					</shiro:authenticated> <shiro:notAuthenticated>
						<a href="login.jsp">登录 </a>
					</shiro:notAuthenticated> 
					<a href="myOrder.jsp">我的订单</a> 
				</span> <span class="layui-breadcrumb house-breadcrumb-icon"
					lay-separator=" "> <a id="search"><i
						class="layui-icon layui-icon-house-find"></i></a> <a href="login.html"><i
						class="layui-icon layui-icon-username"></i></a> <a
					href="cartList.jsp"><i
						class="layui-icon layui-icon-house-shop"></i></a>
				</span>
			</div>
			<div class="house-banner layui-form" style="height: 100px">
				<a class="banner" href="../index.jsp"> <img
					src="../static/img/banner.png" alt="家居商城">
				</a>
				<div class="layui-input-inline">
					<input id="gname-input" name="gname" type="text" placeholder="搜索好物"
						class="layui-input"><i id="search-btn"
						class="layui-icon layui-icon-house-find"></i>
				</div>
				<!-- 购物车图标 -->
				<a class="shop" href="cartList.jsp"><i
					class="layui-icon layui-icon-house-shop"></i><span
					class="layui-badge" id="cart-count"></span></a>
			</div>
			<ul class="layui-nav close">
				<li class="layui-nav-item layui-this"><a href="../index.jsp">首页</a></li>
				<li class="layui-nav-item"><a href="list.jsp">居家用品</a></li>
			</ul>
			<button id="switch">
				<span></span><span class="second"></span><span class="third"></span>
			</button>
		</div>
	</div>

	<div class="layui-container house-list">
		<p class="classify">
			<a href="../index.jsp">首页</a> &gt; <span>家居用品</span>
		</p>
		<div class="list-banner"></div>
		<div class="filter">
			<div id="category-view"></div>
			<script type="text/html" id="category-tpl">
			
				<span>分类：</span>
				<ul>
					<li class="active">全部</li>
					{{#  layui.each(d, function(index, item){ }}
						<li>{{item.cname}}</li>
					{{#  }); }}
				</ul>
			
			
			</script>

			<div>
				<span>排序：</span>
				<ul>
					<li class="active">默认</li>
					<li>价格<i class="layui-icon layui-icon-house-up"></i><i
						class="layui-icon layui-icon-triangle-d"></i></li>
					<li>上架时间</li>
				</ul>
			</div>
		</div>
		<!-- 模板 -->

		<script id="mytpl" type="text/html">

{{#  layui.each(d.data, function(index, item){ }}

  	<div class="layui-col-xs6 layui-col-sm3">
      <div class="list-detail">
        <div class="img"><img src="../res/goods/images/{{item.images}}"></div>
        <p class="title"><a href="detail.jsp?gid={{item.gid}}">{{item.gname}}</a></p>
        <p><span class="price">￥{{item.price}}</span></p> 
      </div>
    </div>
{{#  }); }}
{{#  if(d.data && d.data.length === 0){ }}
    无数据
  {{#  } }} 
  </script>
		<div class="layui-row layui-col-space25">
			<div id="view"></div>
		</div>
		<div id="houseList"></div>
	</div>

	<script type="text/javascript">
		layui.use([ 'jquery', 'laytpl' ], function() {
			var laytpl = layui.laytpl;
			var $ = layui.jquery;
			

			
			//渲染商品列表
			$.ajax({
				url : '../goods/listPage?page=1&limit=10',
				type : "post",
				dataType : "json",
				success : function(data) {
					console.log(data);
					renderTpl($, laytpl, data, '#mytpl', 'view');
				}
			})
			
			//渲染类别
			$.ajax({
				url : '../category/list',
				type : "post",
				dataType : "json",
				success : function(data) {
					console.log(data);
					renderTpl($, laytpl, data, '#category-tpl', 'category-view');
				}
			})

			$('#search-btn').click(function() {
				var input = $('#gname-input');
				$.post('../goods/listPage', {
					"gname" : input.val(),
					'page' : 1,
					'limit' : 10
				}, function(data) {
					console.log(data);
					renderTpl($, laytpl, data, '#mytpl', 'view');
				})

			})
			//渲染购物车数字
			 
			<%
			String param = "";
			if(account!=null){
				param = "?buyerId="+account.getId();
			}
			%>
			console.log('../cart/list<%=param%>');
			getData($,'../cart/list<%=param%>',function(data){
				console.log(data.length);
				var cartCount = document.getElementById('cart-count');
				cartCount.innerHTML=data.length;
			})
			
		})
	</script>


	<div class="house-footer">
		<div class="layui-container">
			<div class="intro">
				<span class="first"><i
					class="layui-icon layui-icon-house-shield"></i>7天无理由退换货</span> <span
					class="second"><i class="layui-icon layui-icon-house-car"></i>满99元全场包邮</span>
				<span class="third"><i
					class="layui-icon layui-icon-house-diamond"></i>100%品质保证</span> <span
					class="last"><i class="layui-icon layui-icon-house-tel"></i>客服400-2888-966</span>
			</div>
			<div class="about">
				<span class="layui-breadcrumb" lay-separator="|"> <a
					href="about.html">关于我们</a> <a href="about.html">帮助中心</a> <a
					href="about.html">售后服务</a> <a href="about.html">配送服务</a> <a
					href="about.html">关于货源</a>
				</span>
				<p>家居商城版权所有 &copy; 2012-2020</p>
			</div>
		</div>
	</div>


	<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
	<!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
	

</body>
</html>